<template>
  <a-modal v-model:open="visible" width="911rem" title="选择个人客户" :footer="null" @ok="handleOk">
    <div class="friend">
      <a-input v-model="search" placeholder="输入方案名称" />
      <div class="list">
        <div class="per">
          <div class="state">未实名</div>
          <div class="name">李广军</div>
          <div class="idnum">230165489657362165</div>
          <div class="tel">15145028352</div>
        </div>
        <div class="per">
          <div class="state">未实名</div>
          <div class="name">李广军</div>
          <div class="idnum">230165489657362165</div>
          <div class="tel">15145028352</div>
        </div>
        <div class="per">
          <div class="state">未实名</div>
          <div class="name">李广军</div>
          <div class="idnum">230165489657362165</div>
          <div class="tel">15145028352</div>
        </div>
        <div class="per">
          <div class="state">未实名</div>
          <div class="name">李广军</div>
          <div class="idnum">230165489657362165</div>
          <div class="tel">15145028352</div>
        </div>
        <div class="per">
          <div class="state">未实名</div>
          <div class="name">李广军</div>
          <div class="idnum">230165489657362165</div>
          <div class="tel">15145028352</div>
        </div>
        <div class="per">
          <div class="state">未实名</div>
          <div class="name">李广军</div>
          <div class="idnum">230165489657362165</div>
          <div class="tel">15145028352</div>
        </div>
        <div class="per">
          <div class="state">未实名</div>
          <div class="name">李广军</div>
          <div class="idnum">230165489657362165</div>
          <div class="tel">15145028352</div>
        </div>
        <div class="per">
          <div class="state">未实名</div>
          <div class="name">李广军</div>
          <div class="idnum">230165489657362165</div>
          <div class="tel">15145028352</div>
        </div>
      </div>
      <a-pagination class="pager" :total="50" show-size-changer show-quick-jumper />
    </div>
  </a-modal>
</template>

<script setup>
  import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue';
  const visible = ref(false);
  const search = ref('');
  const open = () => {
    visible.value = true;
  };
  function handleOk() {}
  defineExpose({
    open,
  });
</script>
<style scoped lang="less">
  .friend {
    background: #ffffff;
    border-radius: 18rem;
    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 20rem;
      .per {
        width: calc(50% - 10rem);
        height: 129rem;
        background: #eaeaea;
        border-radius: 11rem;
        font-family: Microsoft YaHei;
        padding: 16rem 21rem;
        box-sizing: border-box;
        position: relative;
        margin-bottom: 20rem;
        .name {
          font-size: 24rem;
          color: #000000;
        }
        .idnum {
          font-size: 20rem;
          color: #565656;
        }
        .tel {
          font-size: 20rem;
          color: #000000;
          text-align: right;
        }
        .state {
          width: 65rem;
          height: 34rem;
          background: #fc5451;
          border-radius: 0 11rem 0 11rem;
          text-align: center;
          line-height: 34rem;
          font-family: SimSun;
          font-size: 14rem;
          color: #ffffff;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
  }
</style>
